<template>
  <div>
    <ul>
      <li
        v-show="item.type"
        v-for="(item, index) in dat"
        :key="index"
        :class="[{ hasChild: item.children }, { open: item.show }]"
      >
        <a @click.prevent="option(item.children, index)" href="#">
          {{ item.name }}
        </a>
        <Dg v-if="item.children" :dat="item.children"></Dg>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Dg',
  props: {
    dat: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    option(list, index) {
      if (!Array.isArray(list)) return false
      this.dat[index].show = !this.dat[index].show
      list.forEach((v) => {
        if (v.type) {
          this.$set(v, 'type', '')
        } else {
          this.$set(v, 'type', 1)
        }
        
      })
    },
  },
}
</script>

<style lang="scss">
ul {
  list-style: none;
  li {
    padding-left: 20px;
    background: url('./st_node.gif') no-repeat;
  }
  .hasChild {
    background: url('./st_folder.gif') no-repeat;
    list-style-image: url('./st_icon.png');
  }
  .open {
    background: url('./st_folder_open.gif') no-repeat;
    list-style-image: url('./st_icon_open.png');
  }
}
a {
  text-decoration: none;
  color: #0000ee;
}
a:hover {
  color: #ff3333;
}
</style>
